import {useDispatch,useSelector} from "react-redux"
import React,{useEffect,useRef} from 'react';
import * as api from "../api/index"
import { Modal ,Form,Button,Input,Select } from 'antd';

type Props = {
  isModalVisible:any,
  handleCancel:any,
  editValue:any,
  data:any,
  // handOk:any
}

const Son = (props: Props) => {
  // let dataref=useRef()
  const dispatch:any=useDispatch()
  const onFinish = (values: any) => {
    // console.log(values);
  if(props.editValue.title==="新增"){
   
    dispatch(api.add_list(values))
  }else{
    values.img = props.editValue.img
    dispatch(api.edit_list(values))
  }
 
 
  };
  const [from] = Form.useForm()
  // console.log(from);
  
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  useEffect(()=>{
  if(props.editValue.title=="编辑"){
   from.setFieldsValue({...props.editValue})
    }else{
      from.setFieldsValue({
        key:props.data.length+1,
        name:'',
        city:'',
        state:"",
      })
    }
  },[props.editValue])
  return (
    <div>
      <Modal forceRender title={props.editValue.title} visible={props.isModalVisible} onCancel={props.handleCancel}>
      <Form
      form={from}
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
       <Form.Item
        label="key"
        name="key"
        rules={[{ required: true, message: 'Please input your name!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="name"
        name="name"
        rules={[{ required: true, message: 'Please input your name!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="city"
        name="city"
        rules={[{ required: true, message: 'Please input your city!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item label="Select" name="state">
          <Select>
            <Select.Option value="已完成">已完成</Select.Option>
            <Select.Option value="未完成">未完成</Select.Option>
            <Select.Option value="进行中">进行中</Select.Option>
          </Select>
        </Form.Item>
     

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit" onClick={props.handleCancel}>
          确认添加
        </Button>
      </Form.Item>
    </Form>

      </Modal>
    </div>
  )
}

export default Son